<template>
	<view class="addGuide">
		<!-- <view class="header-box">
			<view class="top-box-box">
				<cu-status-bar></cu-status-bar>
				<view class="top-box">
					<view class="icon" @click="back">
						<u-icon name="arrow-left" color="#fff" size="35"></u-icon>
					</view>
					<view class="btn" @click="submit">
						发布
					</view>
				</view>
			</view>
		</view> -->
		<view class="content-box">
			<view class="chooseAddress" @click="pickerShow = true" v-if="isAudit == 0">
				<view class="left">
					<!-- <image class="img" src="/static/icon/trip.png"></image>location -->
					<uni-icons type="location" size="25" color="#ccc"></uni-icons>
					<view class="text">
						{{pickerValue.attractionName?pickerValue.attractionName:'请选择景点'}}
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#000" size="28"></u-icon>
				</view>
			</view>
			<view class="tag-box">
				<view class="tag-item" v-if="pickerValue.attractionName">
					<view class="tag-img-box">
						<!-- <image src="@/static/icon/jinghao.png" mode="aspectFit" class="tag-img"></image> -->
						<text>#</text>
					</view>
					<text>{{pickerValue.attractionName}}</text>
				</view>
				<view class="tag-item">
					<view class="tag-img-box">
						<!-- <image src="@/static/icon/jinghao.png" mode="aspectFit" class="tag-img"></image> -->
						<text>#</text>
					</view>
					<text>攻略</text>
				</view>
			</view>
			<view class="form-box">
				<view class="title-box" v-if="isAudit == 0">
					<view class="title">
						<text class="text">标题</text>
					</view>
				</view>
				<view class="input-box" v-if="isAudit == 0">
					<u--input v-model="params.title" placeholder="标题简介..." border="surround" inputAlign='left'
						:customStyle="{border:'none'}" fontSize="26rpx"></u--input>
				</view>
				<view class="title-box" v-if="isAudit == 0">
					<view class="title">
						<text class="text">内容</text>
					</view>
				</view>
				<view class="input-box" v-if="isAudit == 0">
					<!-- <u--textarea v-model="params.content" placeholder="详细攻略..." border="surround" inputAlign='left'
						:customStyle="{border:'none'}" fontSize="26rpx" :maxlength='1000' :height="500"></u--textarea> -->
					<myEditor class="myEditor"></myEditor>
				</view>
				<view class="title-box">
					<view class="title">
						<text class="text">图片</text>
					</view>
				</view>
				<view class="photo-list">
					<u-upload :fileList="photoList" @afterRead="afterRead" @delete="deletePic" multiple
						:previewFullImage="true" uploadIcon="plus" :maxCount="1000"></u-upload>
				</view>
			</view>
		</view>

		<view class="btn" @click="submit" v-if="isAudit == 0">
			<text>发布</text>
		</view>

		<u-picker confirmColor="#096EF4" closeOnClickOverlay :show="pickerShow" :columns="pickerColumns"
			keyName="attractionName" itemHeight="70" :visibleItemCount="6" @cancel="pickerShow=false"
			@confirm='pickerConfirm' @close="pickerShow=false"></u-picker>

	</view>
</template>

<script>
	import myEditor from '@/components/myEditor/myEditor.vue'
	export default {
		data() {
			return {
				pickerShow: false,
				pickerValue: {},
				pickerColumns: [],
				orderId: "",
				params: {
					title: "",
					content: "",
					images: "",
					attractionId: "",
					orderPathAttractionId: "",
				},
				isSave: false,
				photoList: [],
				pathDate: [],
				isAudit: 1, // 审核 0未审核 1审核中
			}
		},
		onLoad(option) {
			uni.$on("input", this.input)
			this.orderId = option.id
			this.getConfigKey();
			this.getOrderRoute();
		},
		components: {
			myEditor
		},
		onUnload() {
			uni.$off("input", this.input)
		},
		methods: {
			input(e) {
				this.params.content = e;
			},
			// 提交
			async submit() {
				if (!this.params.attractionId) {
					uni.showToast({
						icon: "none",
						title: "请选择景点"
					})
					return
				}
				if (!this.params.title) {
					uni.showToast({
						icon: "none",
						title: "请输入标题"
					})
					return
				}
				if (!this.params.content) {
					uni.showToast({
						icon: "none",
						title: "请输入内容"
					})
					return
				}
				if (!this.photoList.length) {
					uni.showToast({
						icon: "none",
						title: "请上传图片"
					})
					return
				}
				this.params.images = this.photoList.map(i => i.url).join(",")
				let res = await this.$u.api.getmomentpushMoment(this.params)
				if (res.code == 200) {
					this.$u.toast("发布成功")
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			},
			// 获取审核状态
			async getConfigKey() {
				let res = await this.$u.api.getconfigKey({
					configKey: 'is_audit'
				})
				if (res.code == 200) this.isAudit = res.msg
			},
			// 景点选择
			async pickerConfirm(e) {
				this.pickerValue = e.value[0]
				this.params.attractionId = e.value[0].attractionId
				this.params.orderPathAttractionId = e.value[0].id
				this.pickerShow = false
			},
			// 获取景点路线
			async getOrderRoute() {
				let path = await this.$u.api.getOrderPath({
					id: this.orderId
				})
				this.pathDate = path.data
				this.pickerColumns = [path.data]
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this.photoList.length
				lists.map((item) => {
					this.photoList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$u.api.uploadFile(lists[i].url)
					let item = this.photoList[fileListLen]
					this.photoList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.fileName
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic(event) {
				this.photoList.splice(event.index, 1)
			},
			back() {
				if (this.params.title || this.params.content || this.photoList.length) {
					uni.showModal({
						title: '提示',
						content: '当前攻略还未保存，是否继续编辑？',
						cancelText: "直接退出",
						confirmText: "继续编辑",
						confirmColor: "#63c8cc",
						success: (res) => {
							if (res.confirm) {
								// 用户点击确定
							} else if (res.cancel) {
								// 用户点击取消
								uni.navigateBack()
							}
						}
					})
				} else {
					uni.navigateBack()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-textarea-wrapper {
		font-size: 26rpx;
	}

	::v-deep .u-upload__button {
		height: 208rpx !important;
		width: 208rpx !important;
		background-color: #fff;
		border-radius: 60rpx 30rpx 60rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border: 2rpx dashed #333;
		box-shadow: 4rpx 4rpx 5rpx#ccc;
	}

	::v-deep .u-upload__wrap__preview__image {
		height: 208rpx !important;
		width: 208rpx !important;
		border-radius: 60rpx 30rpx 60rpx 30rpx;
		box-shadow: 4rpx 4rpx 5rpx #ccc;
	}

	::v-deep .u-upload__wrap__preview {
		height: 208rpx !important;
		width: 208rpx !important;
		border-radius: 60rpx 30rpx 60rpx 30rpx;
		box-shadow: 4rpx 4rpx 5rpx #ccc;
	}

	::v-deep .u-upload__deletable {
		height: 30rpx;
		width: 30rpx;
		top: 15rpx;
		right: 15rpx;
		border-radius: 50%;
		padding: 6rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-direction: column;
	}

	::v-deep .u-upload__deletable__icon {
		position: relative;
		top: 0;
	}

	::v-deep .uicon-close {
		font-size: 20rpx !important;
	}


	.addGuide {
		background-color: #f2f5f9;
		min-height: 99vh;

		.btn {
			display: flex;
			justify-content: flex-end;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;

			text {
				display: inline-block;
				font-size: 26rpx;
				font-weight: bold;
				letter-spacing: 4rpx;
				color: #096EF4;
				position: relative;
				z-index: 2;
				background-color: #fff;
				padding: 15rpx 30rpx;
				border-radius: 30rpx;
				box-shadow: 3rpx 3rpx 4rpx #096EF4;
			}

		}

		.content-box {
			padding: 20rpx 30rpx;
			// padding-top: 110rpx;
		}

		.form-box {
			.photo-list {
				margin: 20rpx 0;
			}

			.input-box {
				border-radius: 10rpx;
				padding: 10rpx;
				margin: 20rpx 0;
				background-color: #fff;
				box-shadow: 4rpx 4rpx 5rpx #096EF4;
			}

			.title-box {
				margin: 0 20rpx;
				display: flex;
				flex-shrink: 0;
				align-items: center;

				.title {
					margin-right: 20rpx;
					position: relative;

					&::after {
						position: absolute;
						content: '';
						display: block;
						width: 100%;
						height: 8rpx;
						background-image: linear-gradient(45deg, #096EF4, #fff);
						bottom: 0;
						left: -4rpx;
						z-index: 1;
						border-radius: 4rpx;
					}

					.text {
						font-weight: bold;
						position: relative;
						z-index: 2;
					}
				}
			}
		}

		.tag-box {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.tag-item {
				display: flex;
				align-items: center;
				margin-right: 30rpx;
				background-color: #efefef;
				padding: 10rpx 16rpx;
				border-radius: 30rpx;

				.tag-img-box {
					background-color: $overall-color;
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					padding: 6rpx;
					margin-right: 10rpx;
					line-height: 40rpx;

					// .tag-img {
					// 	width: 28rpx;
					// 	height: 28rpx;
					// }

					text {
						width: 100%;
						display: inline-block;
						color: #fff;
						text-align: center;
						font-weight: 700;
						font-size: 30rpx;
						line-height: 40rpx;
					}

				}

				text {
					font-size: 26rpx;
				}
			}
		}

		.chooseAddress {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 40rpx;
			margin-bottom: 20rpx;

			.left {
				display: flex;
				align-items: center;

				.img {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				.text {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 4rpx;
					color: #096EF4;
				}
			}

		}

		.header-box {
			position: fixed;
			width: 100%;
			left: 0;
			top: 0;
			height: 90rpx;
			z-index: 10;
			background: linear-gradient(to right top, #096EF4, #8dc1fb);
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-evenly;

			.top-box-box {
				width: 100%;
			}

			.top-box {
				width: 100%;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.icon {
					margin-right: 30rpx;
					position: relative;
					z-index: 2;
					background-color: rgba(#fff, .6);
					border-radius: 50rpx;
					padding: 10rpx;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}


			}
		}
	}
</style>